<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .bench_search2 {
    margin-bottom: 10px;
  }
  .mb20 {
    margin-bottom: 20px;
  }
</style>

<template>
  <Card shadow class="card_style">
    <Row class="bench_search2">
      <Col span="9" offset="1">
        <span>产品名称：</span>
        <Input style="width: 80%;" v-model="formData.shop_name" />
      </Col>
      <Col span="2" offset="3">
        <Button type="info" @click="searchData"><Icon type="ios-search" /> 搜 索</Button>
      </Col>
      <Col span="2">
        <Button type="success" @click="addShop">添 加</Button>
      </Col>
    </Row>
    <Table border :columns="columnsInfo" :data="shoplist"></Table>
    <Modal v-model="modalInfo.show" :title="modalInfo.title" width="700" @on-ok="save">
      <Form label-position="right" :label-width="100">
        <Row class="mb20">
          <Col span="7" class="ivu-form-item-label">门店名称：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="modalInfo.shop_name"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="7" class="ivu-form-item-label">门店手机：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="modalInfo.shop_mobile" placeholder="13412345678"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="7" class="ivu-form-item-label">品牌信息：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Select v-model="modalInfo.brand_code" :disabled="modalInfo.updateIndex > -1" filterable>
              <Option v-for="obj in brands" :value="obj.brand_code" :key="obj.id">{{obj.brand_name}}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="7" class="ivu-form-item-label">门店地址：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input type="textarea" :autosize="{minRows: 2,maxRows: 4}" v-model="modalInfo.shop_address"/>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="7" class="ivu-form-item-label">门店详情：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input type="textarea" :autosize="{minRows: 4,maxRows: 7}" v-model="modalInfo.shop_info"/>
          </Col>
        </Row>
      </Form>
    </Modal>
  </Card>
</template>

<script>
import { brandShop, brandList, addShop, updateShop } from '@/api/ctcard'
export default {
  data () {
    return {
      formData: {},
      modalInfo: { show: false },
      brands: [],
      brandTypeDict: {},
      columnsInfo: [
        { title: '门店名称', key: 'shop_name' },
        { title: '门店编号', key: 'shop_code' },
        { title: '门店手机', key: 'shop_mobile' },
        {
          title: '品牌信息',
          key: 'brand_code',
          render: (h, params) => {
            return h('span', this.brandTypeDict['a' + params.row.brand_code] || '无')
          }
        },
        { title: '创建时间', key: 'create_time' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.editShop(params.row, params.index)
                  }
                }
              }, '编辑')
            )
            return h('div', temp)
          }
        }
      ],
      shoplist: []
    }
  },
  methods: {
    getData () {
      brandShop({}).then(res => {
        if (res.data.data) {
          this.shoplist = res.data.data
        } else {
          this.$Notice.error({
            title: '获取列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    searchData () {
      console.log(this.formData.brand_name)
      console.log(this.brands)
    },
    addShop () {
      this.modalInfo.title = '新品牌信息'
      this.modalInfo.shop_name = ''
      this.modalInfo.shop_mobile = ''
      this.modalInfo.shop_info = ''
      this.modalInfo.brand_code = ''
      this.modalInfo.shop_address = ''
      this.modalInfo.updateIndex = -1
      this.modalInfo.show = true
    },
    editShop (obj, index) {
      this.modalInfo.title = obj.shop_name + '（编号：' + obj.shop_code + '）'
      this.modalInfo.shop_name = obj.shop_name
      this.modalInfo.shop_mobile = obj.shop_mobile
      this.modalInfo.shop_info = obj.shop_info
      this.modalInfo.brand_code = obj.brand_code
      this.modalInfo.shop_address = obj.shop_address
      this.modalInfo.updateIndex = index
      this.modalInfo.show = true
      this.modalInfo.shop_code = obj.shop_code
    },
    save () {
      let param = {
        shop_name: this.modalInfo.shop_name,
        shop_info: this.modalInfo.shop_info,
        shop_address: this.modalInfo.shop_address,
        shop_mobile: this.modalInfo.shop_mobile
      }
      if (this.modalInfo.updateIndex === -1) {
        param.brand_code = this.modalInfo.brand_code
        addShop(param).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '添加成功' })
            this.getData()
          } else {
            this.$Notice.error({ title: '失败，请重试' })
          }
        })
      } else {
        param.shop_code = this.modalInfo.shop_code
        updateShop(this.modalInfo).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '保存成功' })
            let temp = this.shoplist[this.modalInfo.updateIndex]
            temp.shop_name = param.shop_name
            temp.shop_info = param.shop_info
            temp.shop_address = param.shop_address
            temp.shop_mobile = param.shop_mobile
          } else {
            this.$Notice.error({ title: '失败，请重试' })
          }
        })
      }
    }
  },
  mounted () {
    brandList().then(res => {
      if (res.data.data) {
        this.brands = res.data.data
        this.brands.forEach(element => {
          this.brandTypeDict['a' + element.brand_code] = element.brand_name
        })
      }
      this.getData()
    })
  }
}
</script>
